<template>
  <div>
    <!-- <a-card :bordered="false">
     <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="被保险企业">
              <a-input placeholder="请选择被保险企业" ></a-input>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    </a-card> -->
     <a-card :title="'当前在保人员分布（'+tsa+'）'" style="margin-top:15px">
      <div slot="extra">
        <a-radio-group >
          <a-radio-button @click="changeDays(1)" :class="type==1?'checked-background':''"><font :class="type==1?'checked-font-color':''">案件数</font></a-radio-button>
          <a-radio-button @click="changeDays(2)" :class="type==2?'checked-background':''"><font :class="type==2?'checked-font-color':''">理赔金额</font></a-radio-button>
        </a-radio-group>
      </div>
      <bar v-if="type==1" class="statistic" title="" :fields="['y']" :yaxisText="'人数'" :dataSource="dataSource" :height="400"/>
      <bar v-else class="statistic" title="" :fields="['y']" :yaxisText="'金额'" :dataSource="dataSource2" :height="400"/>
      <!-- <line-chart-multid title="" :dataSource="dataBar"  :aliases="[{field:'type1',alias:'陌生人'}, {field:'type2',alias:'远程开门'}, {field:'type3',alias:'正常开门'}]" :width="1400"/> -->
    </a-card>
  </div>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'
  import JUpload from '@/components/jeecg/JUpload'
  import Bar from '@/components/chart/Bar'

  export default {
    name: 'InConfigForm',
    components: {JUpload,Bar
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        model:{
         },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
        },
        url: {
          selectUserByType:"/order/inInsureOrderRecord/selectUserByType",
          selectMoneyByType:"/order/inInsureOrderRecord/selectMoneyByType"
        },
        type:1,
        dataSource:[],
        number:0,
        dataSource2:[],
        number2:0,
        tsa:'合计人数：'+number+'人'
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
      this.getData();
    },
    methods: {
      changeDays(type){
        this.type = type
        if(this.type==1)this.tsa = '合计人数：'+number+'人';
        if(this.type==2)this.tsa = '合计金额：'+number2+'元';
      },
      getData(){
        const that = this;
        getAction(this.url.selectUserByType,{}).then((res)=>{
          if(res.success){
            that.dataSource = res.result
            that.dataSource.forEach((data,index)=>{
              that.number = that.number + data.y
            })
          }else{
            that.$message.warning(res.message);
          }
        })
        getAction(this.url.selectMoneyByType,{}).then((res)=>{
          if(res.success){
            that.dataSource2 = res.result
            that.dataSource2.forEach((data,index)=>{
              that.number2 = that.number2 + data.y
            })
          }else{
            that.$message.warning(res.message);
          }
        })
        if(that.type==1)that.tsa = '合计人数：'+number+'人';
        if(that.type==2)that.tsa = '合计金额：'+number2+'元';
      },
    }
  }
</script>

<style lang="less" scoped>
  .checked-background{
    background-color: #1890FF;border-color: #1890FF;
  }
  .checked-font-color{
    color: #ffffff;
  }
  </style>